<script setup lang="ts">
import type { BookmarkDTO, FolderNode } from '@/stores/bookmarkManager'

/**
 * @用途
 * @author bear
 * @创建时间 2025/11/14
 **/
import { mdiFolderOutline, mdiMenuRight } from '@mdi/js'

const prop = defineProps<{
  node: FolderNode
}>()
const emit = defineEmits<{
  (e: 'opened'): void
  (e: 'ondrop', val: { source: FolderNode | BookmarkDTO; target: FolderNode | BookmarkDTO }): void
  (e: 'enter', val: { node: FolderNode; event: MouseEvent }): void
  (e: 'leave', val: { node: FolderNode; event: MouseEvent }): void
}>()
function enterItem(event: MouseEvent) {
  emit('enter', { node: prop.node, event })
}
function handleDrop(source: any) {
  emit('ondrop', { source: source.bookmark, target: prop.node })
}
</script>

<template>
  <draggable-item
    :accepted-types="['bookmark', 'bookmark-folder']"
    :allowed-edges="['top']"
    :drag-data="node"
    drag-type="bookmark-folder"
    @dragenter="enterItem"
    @drop="handleDrop"
  >
    <v-list-item
      ref="tabElementRef"
      :append-icon="mdiMenuRight"
      min-height="20"
      ripple
      @click=""
      @mouseenter="enterItem"
    >
      <template #prepend>
        <v-avatar :icon="mdiFolderOutline" size="20" />
      </template>

      <v-list-item-title>{{ node.name }}</v-list-item-title>
    </v-list-item>
  </draggable-item>
</template>

<style scoped></style>
